<template>
  <body id="poster">
  <transition
      mode="out-in"
      appear
      enter-active-class="animate__animated animate__swing"
      leave-active-class="animate__animated animate__rollOut"
      name="fade" :duration="3000"
  >
      <el-form class="login-container" label-position="left"
               ref="loginForm"
               :model="loginForm"
               :rules="rules"
               label-width="0px">
        <!--<h3 class="login_title">人脸登录</h3>-->
        <div class="login_form_header">
          <router-link class="login_title" to="/login">登录</router-link>
          <el-divider direction="vertical"></el-divider>
          <router-link class="login_title" to="/registered">注册</router-link>
        </div>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <el-form-item style="margin-top: 20px" prop="username">
          <el-input type="text" v-model="loginForm.username"
                    auto-complete="off" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" show-password
                    auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%;background: #80b4d7;border: none"
                     v-on:click="login('loginForm')">登 录</el-button>
        </el-form-item>
        <div class="login_type">
          <router-link to="/">
            <el-image style="width: 60px; height: 60px" :src="factUrl" fit="fill" />
          </router-link>
        </div>
      </el-form>
  </transition>
  </body>

</template>

<script>
import axios from '../../axios/index.js'
import store from '../../store/index.js'
import { ElMessage } from 'element-plus'
import "animate.css"
import face_img_url from "../../assets/img/logo/logo1.png"
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: [],
      rules: {
        email: [
          {
            type: 'email',
            required: true,
            message: '请输入正确的邮箱地址',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      },
      factUrl: face_img_url
    }
  },
  methods: {
    login (loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
           axios.post('/user/login',this.loginForm)
           //  axios.post('/user/login',null,{
           //    params: this.loginForm
           //  })
               .then(res => {
             console.log(res);
             let jwt = res.headers['authorization'];
            store.commit('SET_USERINFO', {
              id: res.data.data.id,
              username: res.data.data.username
            })
            store.commit('SET_TOKEN', jwt)
            this.$router.push('/')
          }).catch(error => {
            ElMessage.error(error)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    ifHaveToken () {
      const token = localStorage.getItem('token')
      // console.log(token)
      if (token != null || token !== '' || token !== 'undefined') {
        this.$router.push('/')
      }
    }
  },
  mounted () {
    // this.ifHaveToken();
  }
}
</script>

<style scoped>
.login-container {
  border-radius: 30px;
  background-clip: padding-box;
  width: 350px;
  height: 350px;
  padding: 35px 35px 15px 35px;
  background: rgb(63, 170, 217,0.05);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_form_header{
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.login_type {
  margin: 30px auto 30px auto;
  text-align: center;
  color: #041f2d;
}
a{
  text-decoration: none;
}
.fact_div{
  background: #869bab;
  border-radius: 60%;
  height: 191px;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}
.el-input{
  --el-input-bg-color: rgb(63, 170, 217,0.1);
  --el-input-text-color: black;
  --el-input-placeholder-color: rgb(81, 100, 115);
}
</style>

<style>
.el-dialog{
  --el-dialog-width: 30%;
  border-radius: 20px;
  /*background: rgba(245, 245, 245, 0.88);*/
}
.el-dialog__header{
  padding:0px !important;
  height: 0px ;
}
</style>
